<script lang="ts" setup>
import type { previewDataType, resTable, newsType, publicResData } from "./type";
import { ref, reactive, onMounted } from "vue";
import request from "@/utils/request";
import { useRouter } from "vue-router";
import time from "@/utils/time";
const router = useRouter();
const tableData = ref<newsType[]>([]);
const previewData = reactive<previewDataType>({
  id: "",
  cover: "",
  username: "",
  name: "",
  isShow: "",
  times: "",
  content: "",
  title: "",
});
const dialogTableVisible = ref(false);
onMounted(() => {
  getTable();
});
const getTable = async () => {
  const res = await request.get<any, resTable>("/news/list");
  tableData.value = res.data;
};
const handleEdit = (data: any) => {
  router.push(`/news-manage/newsedit/${data.id}`);
};
const handleDelete = async (data: any) => {
  const res = await request.delete<any, publicResData>(`/news/delete/${data.id}`);
  if (res.code == "200") {
    tableData.value.forEach((obj, index) => {
      if (obj.username === data.username && obj.times == data.times) {
        tableData.value.splice(index, 1); // 删除当前索引的对象
      }
    });
  }
};
const handleShow = async (data: any) => {
  const res = await request.put<any, publicResData>("/news/show", data);
};

// 预览回调
const handlePreview = (data: any) => {
  Object.assign(previewData, data);
  dialogTableVisible.value = true;
};
const goBack = () => {
  router.back();
};
</script>
<template>
  <el-page-header @back="goBack">
    <template #content>
      <span class="text-large font-600 mr-3"> 广告列表 </span>
    </template>
  </el-page-header>
  <div class="divBox">
    <el-table :data="tableData">
      <el-table-column label="头像" width="70">
        <template #default="scope">
          <el-avatar :src="`http://localhost:3000${scope.row.avatar}`" />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="账号" width="100" />
      <el-table-column prop="name" label="昵称" width="100" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="times" label="发布时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ time(scope.row.times) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="cover" label="封面">
        <template #default="scope">
          <div class="demo-image">
            <el-image
              style="height: 100px"
              :src="`http://localhost:3000${scope.row.cover}`"
              fit="contain"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="isShow" label="是否发布">
        <template #default="scope">
          <el-switch
            @change="handleShow(scope.row)"
            active-value="1"
            inactive-value="0"
            v-model="scope.row.isShow"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="success" @click="handlePreview(scope.row)">
            预览
          </el-button>
          <el-popconfirm
            @confirm="handleDelete(scope.row)"
            title="你确认要删除吗?"
            confirm-button-text="是"
            cancel-button-text="否"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
    class="previewBox"
    v-model="dialogTableVisible"
    :fullscreen="true"
    title="新闻详情"
    width="800"
  >
    <div>
      <el-image
        class="coverBox"
        :src="`http://localhost:3000${previewData.cover}`"
        fit="contain"
      />
      <br />
      <div>{{ previewData.title }}</div>
      <br />
      <div>{{ time(previewData.times) }}</div>
      <br />
      <hr />
      <div class="htmlContent" v-html="previewData.content"></div>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped>
.previewBox {
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    text-align: center;
  }
}
:deep(.htmlContent) {
  width: 80%;
  margin: 0 auto;
  img {
    max-width: 100%;
  }
}
.coverBox {
  width: 500px;
}

.divBox {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  .el-form {
    width: 50%;
  }
}
</style>
<style lang="scss" scoped>
.divBox {
  display: flex;
  height: calc(100% - 24px);
  justify-content: center;
  align-items: center;
  .el-table {
    width: 80%;
  }
}
</style>
